<!DOCTYPE html>
<html lang="zh-CN" class="light">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>京东(JD.COM)-正品低价、品质保障、配送最快211限时达</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />

    <!-- Tailwind 配置 -->
    <script>
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            colors: {
              primary: "#e1251b", // 京东红
              secondary: "#333333",
              "jd-gray": "#f5f5f5",
              "jd-light-gray": "#eeeeee",
              "jd-border": "#e0e0e0",
              "jd-orange": "#ff7c2d",
              // 暗黑模式颜色
              "dark-bg": "#1a1a1a",
              "dark-card": "#2c2c2c",
              "dark-text": "#f0f0f0",
              "dark-text-secondary": "#9e9e9e",
              "dark-border": "#444444",
            },
            fontFamily: {
              sans: ["PingFang SC", "Helvetica Neue", "Arial", "sans-serif"],
            },
          },
        },
      };
    </script>

    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .scrollbar-hide {
          -ms-overflow-style: none;
          scrollbar-width: none;
        }
        .scrollbar-hide::-webkit-scrollbar {
          display: none;
        }
        .text-shadow {
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        .card-hover {
          transition: transform 0.2s, box-shadow 0.2s;
        }
        .card-hover:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .nav-item-hover {
          position: relative;
        }
        .nav-item-hover::after {
          content: "";
          position: absolute;
          bottom: -2px;
          left: 0;
          width: 0;
          height: 2px;
          background-color: theme("colors.primary");
          transition: width 0.3s ease;
        }
        .nav-item-hover:hover::after {
          width: 100%;
        }
      }
    </style>
  </head>
  <body
    class="bg-white font-sans text-secondary dark:bg-dark-bg dark:text-dark-text transition-colors duration-300"
  >
    <!-- 顶部快捷导航 -->
    <div
      class="bg-jd-gray py-2 text-sm dark:bg-dark-card dark:text-dark-text-secondary"
    >
      <div class="container mx-auto px-4">
        <div class="flex flex-wrap justify-between items-center">
          <div class="flex space-x-6">
            <a href="#" class="hover:text-primary transition-colors">首页</a>
            <a href="#" class="hover:text-primary transition-colors"
              >客户服务</a
            >
            <a href="#" class="hover:text-primary transition-colors"
              >网站导航</a
            >
            <a href="#" class="hover:text-primary transition-colors"
              >手机京东</a
            >
          </div>
          <div class="flex space-x-6 mt-2 sm:mt-0">
            <a href="#" class="hover:text-primary transition-colors">登录</a>
            <a href="#" class="hover:text-primary transition-colors">注册</a>
            <a href="#" class="hover:text-primary transition-colors"
              >我的订单</a
            >
            <a href="#" class="hover:text-primary transition-colors"
              >京东会员</a
            >
          </div>
        </div>
      </div>
    </div>

    <!-- 头部搜索区域 -->
    <header class="bg-white dark:bg-dark-card transition-colors duration-300">
      <div class="container mx-auto px-4 py-4">
        <div
          class="flex flex-col md:flex-row items-center justify-between gap-4"
        >
          <!-- 京东Logo -->
          <div class="text-primary text-4xl font-bold">
            <i class="fa fa-shopping-bag mr-1"></i>京东
          </div>

          <!-- 搜索框 -->
          <div class="relative w-full md:w-1/2 lg:w-2/5">
            <input
              type="text"
              placeholder="家用电器、手机数码、日用百货..."
              class="w-full py-3 px-4 pl-10 pr-14 rounded-full border-2 border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all dark:bg-dark-bg dark:border-dark-border dark:text-dark-text"
            />
            <i
              class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"
            ></i>
            <button
              class="absolute right-1 top-1/2 -translate-y-1/2 bg-primary text-white px-5 py-1.5 rounded-full hover:bg-opacity-90 transition-colors"
            >
              搜索
            </button>
          </div>

          <!-- 购物车和主题切换 -->
          <div class="flex items-center space-x-4">
            <!-- 暗黑模式切换按钮 -->
            <button
              id="theme-toggle"
              class="p-2 rounded-full hover:bg-jd-gray transition-colors dark:hover:bg-dark-border"
            >
              <i class="fa fa-moon-o text-gray-600 dark:hidden"></i>
              <i class="fa fa-sun-o text-yellow-400 hidden dark:block"></i>
            </button>

            <a
              href="#"
              class="relative flex items-center space-x-1 bg-jd-gray px-4 py-2 rounded-full hover:bg-jd-light-gray transition-colors dark:bg-dark-border"
            >
              <i class="fa fa-shopping-cart text-primary"></i>
              <span>购物车</span>
              <span
                class="absolute -top-1 -right-1 bg-primary text-white text-xs w-5 h-5 rounded-full flex items-center justify-center"
                >3</span
              >
            </a>
          </div>
        </div>
      </div>
    </header>

    <!-- 主导航 -->
    <nav class="bg-primary text-white shadow-md">
      <div class="container mx-auto px-4">
        <div class="flex items-center">
          <!-- 分类菜单 -->
          <div class="relative w-56 py-3 font-medium cursor-pointer group">
            <i class="fa fa-th-large mr-2"></i>全部分类
            <!-- 下拉分类菜单 -->
            <div
              class="absolute left-0 top-full w-full bg-white text-secondary shadow-lg rounded-b-lg hidden group-hover:block z-50 dark:bg-dark-card dark:text-dark-text"
            >
              <ul class="divide-y divide-jd-border dark:divide-dark-border">
                <li
                  class="px-4 py-3 hover:bg-jd-gray transition-colors dark:hover:bg-dark-border"
                >
                  <a href="#" class="flex justify-between">
                    <span>家用电器</span>
                    <i class="fa fa-angle-right text-gray-400"></i>
                  </a>
                </li>
                <li
                  class="px-4 py-3 hover:bg-jd-gray transition-colors dark:hover:bg-dark-border"
                >
                  <a href="#" class="flex justify-between">
                    <span>手机/通讯</span>
                    <i class="fa fa-angle-right text-gray-400"></i>
                  </a>
                </li>
                <li
                  class="px-4 py-3 hover:bg-jd-gray transition-colors dark:hover:bg-dark-border"
                >
                  <a href="#" class="flex justify-between">
                    <span>电脑/办公</span>
                    <i class="fa fa-angle-right text-gray-400"></i>
                  </a>
                </li>
                <li
                  class="px-4 py-3 hover:bg-jd-gray transition-colors dark:hover:bg-dark-border"
                >
                  <a href="#" class="flex justify-between">
                    <span>家居/家具</span>
                    <i class="fa fa-angle-right text-gray-400"></i>
                  </a>
                </li>
                <li
                  class="px-4 py-3 hover:bg-jd-gray transition-colors dark:hover:bg-dark-border"
                >
                  <a href="#" class="flex justify-between">
                    <span>男装/女装</span>
                    <i class="fa fa-angle-right text-gray-400"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <!-- 导航链接 -->
          <div
            class="hidden md:flex items-center space-x-6 py-3 overflow-x-auto scrollbar-hide flex-1"
          >
            <a href="#" class="font-medium nav-item-hover">首页</a>
            <a href="#" class="font-medium nav-item-hover">京东超市</a>
            <a href="#" class="font-medium nav-item-hover">全球购</a>
            <a href="#" class="font-medium nav-item-hover">生鲜</a>
            <a href="#" class="font-medium nav-item-hover">京东家电</a>
            <a href="#" class="font-medium nav-item-hover">秒杀</a>
            <a href="#" class="font-medium nav-item-hover">优惠券</a>
            <a href="#" class="font-medium nav-item-hover">PLUS会员</a>
            <a href="#" class="font-medium nav-item-hover">品牌闪购</a>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主轮播图 -->
    <div class="container mx-auto px-4 my-4">
      <div class="relative rounded-xl overflow-hidden shadow-md">
        <img
          src="https://picsum.photos/id/26/1200/400"
          alt="京东促销活动"
          class="w-full h-auto md:h-64 lg:h-80 object-cover"
        />
        <div
          class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2"
        >
          <button class="w-3 h-3 rounded-full bg-white opacity-100"></button>
          <button
            class="w-3 h-3 rounded-full bg-white opacity-50 hover:opacity-100 transition-opacity"
          ></button>
          <button
            class="w-3 h-3 rounded-full bg-white opacity-50 hover:opacity-100 transition-opacity"
          ></button>
          <button
            class="w-3 h-3 rounded-full bg-white opacity-50 hover:opacity-100 transition-opacity"
          ></button>
        </div>
      </div>
    </div>

    <!-- 快捷入口 -->
    <div class="container mx-auto px-4 my-6">
      <div class="grid grid-cols-5 gap-3 md:gap-6">
        <a
          href="#"
          class="flex flex-col items-center p-3 bg-white rounded-xl shadow-sm card-hover dark:bg-dark-card"
        >
          <div
            class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2"
          >
            <i class="fa fa-mobile text-xl"></i>
          </div>
          <span class="text-sm">手机</span>
        </a>
        <a
          href="#"
          class="flex flex-col items-center p-3 bg-white rounded-xl shadow-sm card-hover dark:bg-dark-card"
        >
          <div
            class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2"
          >
            <i class="fa fa-laptop text-xl"></i>
          </div>
          <span class="text-sm">电脑</span>
        </a>
        <a
          href="#"
          class="flex flex-col items-center p-3 bg-white rounded-xl shadow-sm card-hover dark:bg-dark-card"
        >
          <div
            class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2"
          >
            <i class="fa fa-television text-xl"></i>
          </div>
          <span class="text-sm">家电</span>
        </a>
        <a
          href="#"
          class="flex flex-col items-center p-3 bg-white rounded-xl shadow-sm card-hover dark:bg-dark-card"
        >
          <div
            class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2"
          >
            <i class="fa fa-cutlery text-xl"></i>
          </div>
          <span class="text-sm">食品</span>
        </a>
        <a
          href="#"
          class="flex flex-col items-center p-3 bg-white rounded-xl shadow-sm card-hover dark:bg-dark-card"
        >
          <div
            class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2"
          >
            <i class="fa fa-shopping-basket text-xl"></i>
          </div>
          <span class="text-sm">更多</span>
        </a>
      </div>
    </div>

    <!-- 限时抢购 -->
    <div class="container mx-auto px-4 my-8">
      <div class="bg-white rounded-xl shadow-sm p-4 dark:bg-dark-card">
        <div class="flex items-center justify-between mb-6">
          <div class="flex items-center">
            <div
              class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mr-2"
            >
              <i class="fa fa-clock-o"></i>
            </div>
            <h2 class="text-xl font-bold">限时抢购</h2>
            <div class="ml-4 flex items-center text-primary">
              <div class="flex space-x-2">
                <span
                  class="w-8 h-8 bg-secondary text-white flex items-center justify-center rounded dark:bg-dark-bg"
                  >10</span
                >
                <span class="text-secondary">:</span>
                <span
                  class="w-8 h-8 bg-secondary text-white flex items-center justify-center rounded dark:bg-dark-bg"
                  >25</span
                >
                <span class="text-secondary">:</span>
                <span
                  class="w-8 h-8 bg-secondary text-white flex items-center justify-center rounded dark:bg-dark-bg"
                  >36</span
                >
              </div>
              <span
                class="ml-2 text-sm text-gray-500 dark:text-dark-text-secondary"
                >剩余时间</span
              >
            </div>
          </div>
          <a href="#" class="text-primary hover:underline"
            >更多 <i class="fa fa-angle-right"></i
          ></a>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
          <!-- 抢购商品1 -->
          <div
            class="flex flex-col items-center text-center p-2 card-hover rounded-lg"
          >
            <div class="relative mb-2">
              <img
                src="https://picsum.photos/id/96/300/300"
                alt="智能手机"
                class="w-full h-32 object-cover rounded"
              />
              <span
                class="absolute top-1 left-1 bg-primary text-white text-xs px-1.5 py-0.5 rounded"
                >限时</span
              >
            </div>
            <p class="text-sm line-clamp-2 mb-1">
              智能手机 全面屏 大电池 拍照手机
            </p>
            <div class="flex items-center justify-center">
              <span class="text-primary font-bold">¥1299</span>
              <span class="text-gray-400 text-xs line-through ml-1">¥1599</span>
            </div>
          </div>

          <!-- 抢购商品2 -->
          <div
            class="flex flex-col items-center text-center p-2 card-hover rounded-lg"
          >
            <div class="relative mb-2">
              <img
                src="https://picsum.photos/id/20/300/300"
                alt="无线耳机"
                class="w-full h-32 object-cover rounded"
              />
              <span
                class="absolute top-1 left-1 bg-primary text-white text-xs px-1.5 py-0.5 rounded"
                >限时</span
              >
            </div>
            <p class="text-sm line-clamp-2 mb-1">
              无线蓝牙耳机 主动降噪 长续航
            </p>
            <div class="flex items-center justify-center">
              <span class="text-primary font-bold">¥299</span>
              <span class="text-gray-400 text-xs line-through ml-1">¥399</span>
            </div>
          </div>

          <!-- 抢购商品3 -->
          <div
            class="flex flex-col items-center text-center p-2 card-hover rounded-lg"
          >
            <div class="relative mb-2">
              <img
                src="https://picsum.photos/id/119/300/300"
                alt="机械键盘"
                class="w-full h-32 object-cover rounded"
              />
              <span
                class="absolute top-1 left-1 bg-primary text-white text-xs px-1.5 py-0.5 rounded"
                >限时</span
              >
            </div>
            <p class="text-sm line-clamp-2 mb-1">机械键盘 青轴 背光 游戏键盘</p>
            <div class="flex items-center justify-center">
              <span class="text-primary font-bold">¥199</span>
              <span class="text-gray-400 text-xs line-through ml-1">¥259</span>
            </div>
          </div>

          <!-- 抢购商品4 -->
          <div
            class="flex flex-col items-center text-center p-2 card-hover rounded-lg"
          >
            <div class="relative mb-2">
              <img
                src="https://picsum.photos/id/180/300/300"
                alt="智能手表"
                class="w-full h-32 object-cover rounded"
              />
              <span
                class="absolute top-1 left-1 bg-primary text-white text-xs px-1.5 py-0.5 rounded"
                >限时</span
              >
            </div>
            <p class="text-sm line-clamp-2 mb-1">智能手表 心率监测 运动模式</p>
            <div class="flex items-center justify-center">
              <span class="text-primary font-bold">¥399</span>
              <span class="text-gray-400 text-xs line-through ml-1">¥599</span>
            </div>
          </div>

          <!-- 抢购商品5 - 仅在中等屏幕以上显示 -->
          <div
            class="hidden md:flex flex-col items-center text-center p-2 card-hover rounded-lg"
          >
            <div class="relative mb-2">
              <img
                src="https://picsum.photos/id/250/300/300"
                alt="移动电源"
                class="w-full h-32 object-cover rounded"
              />
              <span
                class="absolute top-1 left-1 bg-primary text-white text-xs px-1.5 py-0.5 rounded"
                >限时</span
              >
            </div>
            <p class="text-sm line-clamp-2 mb-1">移动电源 20000mAh 双向快充</p>
            <div class="flex items-center justify-center">
              <span class="text-primary font-bold">¥89</span>
              <span class="text-gray-400 text-xs line-through ml-1">¥129</span>
            </div>
          </div>

          <!-- 抢购商品6 - 仅在大屏幕显示 -->
          <div
            class="hidden lg:flex flex-col items-center text-center p-2 card-hover rounded-lg"
          >
            <div class="relative mb-2">
              <img
                src="https://picsum.photos/id/287/300/300"
                alt="游戏鼠标"
                class="w-full h-32 object-cover rounded"
              />
              <span
                class="absolute top-1 left-1 bg-primary text-white text-xs px-1.5 py-0.5 rounded"
                >限时</span
              >
            </div>
            <p class="text-sm line-clamp-2 mb-1">
              游戏鼠标 有线 宏定义 RGB背光
            </p>
            <div class="flex items-center justify-center">
              <span class="text-primary font-bold">¥129</span>
              <span class="text-gray-400 text-xs line-through ml-1">¥199</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 特色专区 -->
    <div class="container mx-auto px-4 my-8">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 左侧大型广告 -->
        <div class="lg:col-span-1 rounded-xl overflow-hidden shadow-md">
          <img
            src="https://picsum.photos/id/21/600/800"
            alt="京东家电专区"
            class="w-full h-full object-cover"
          />
        </div>

        <!-- 右侧商品区 -->
        <div class="lg:col-span-2 grid grid-cols-2 md:grid-cols-3 gap-6">
          <div
            class="bg-white rounded-xl shadow-sm overflow-hidden card-hover dark:bg-dark-card"
          >
            <div class="p-4">
              <h3 class="font-bold text-lg mb-2">家用电器</h3>
              <p
                class="text-sm text-gray-500 mb-3 dark:text-dark-text-secondary"
              >
                品质生活，从家开始
              </p>
              <img
                src="https://picsum.photos/id/118/400/300"
                alt="家用电器"
                class="w-full h-36 object-cover rounded"
              />
            </div>
            <div class="px-4 py-2 bg-jd-gray dark:bg-dark-border">
              <a href="#" class="text-primary text-sm hover:underline"
                >查看更多 <i class="fa fa-angle-right"></i
              ></a>
            </div>
          </div>

          <div
            class="bg-white rounded-xl shadow-sm overflow-hidden card-hover dark:bg-dark-card"
          >
            <div class="p-4">
              <h3 class="font-bold text-lg mb-2">手机数码</h3>
              <p
                class="text-sm text-gray-500 mb-3 dark:text-dark-text-secondary"
              >
                前沿科技，一手掌握
              </p>
              <img
                src="https://picsum.photos/id/160/400/300"
                alt="手机数码"
                class="w-full h-36 object-cover rounded"
              />
            </div>
            <div class="px-4 py-2 bg-jd-gray dark:bg-dark-border">
              <a href="#" class="text-primary text-sm hover:underline"
                >查看更多 <i class="fa fa-angle-right"></i
              ></a>
            </div>
          </div>

          <div
            class="bg-white rounded-xl shadow-sm overflow-hidden card-hover dark:bg-dark-card"
          >
            <div class="p-4">
              <h3 class="font-bold text-lg mb-2">美妆个护</h3>
              <p
                class="text-sm text-gray-500 mb-3 dark:text-dark-text-secondary"
              >
                焕发光彩，自信每一天
              </p>
              <img
                src="https://picsum.photos/id/99/400/300"
                alt="美妆个护"
                class="w-full h-36 object-cover rounded"
              />
            </div>
            <div class="px-4 py-2 bg-jd-gray dark:bg-dark-border">
              <a href="#" class="text-primary text-sm hover:underline"
                >查看更多 <i class="fa fa-angle-right"></i
              ></a>
            </div>
          </div>

          <div
            class="bg-white rounded-xl shadow-sm overflow-hidden card-hover dark:bg-dark-card"
          >
            <div class="p-4">
              <h3 class="font-bold text-lg mb-2">家居家纺</h3>
              <p
                class="text-sm text-gray-500 mb-3 dark:text-dark-text-secondary"
              >
                舒适居家，温馨生活
              </p>
              <img
                src="https://picsum.photos/id/116/400/300"
                alt="家居家纺"
                class="w-full h-36 object-cover rounded"
              />
            </div>
            <div class="px-4 py-2 bg-jd-gray dark:bg-dark-border">
              <a href="#" class="text-primary text-sm hover:underline"
                >查看更多 <i class="fa fa-angle-right"></i
              ></a>
            </div>
          </div>

          <div
            class="bg-white rounded-xl shadow-sm overflow-hidden card-hover dark:bg-dark-card"
          >
            <div class="p-4">
              <h3 class="font-bold text-lg mb-2">食品饮料</h3>
              <p
                class="text-sm text-gray-500 mb-3 dark:text-dark-text-secondary"
              >
                美味佳肴，健康生活
              </p>
              <img
                src="https://picsum.photos/id/292/400/300"
                alt="食品饮料"
                class="w-full h-36 object-cover rounded"
              />
            </div>
            <div class="px-4 py-2 bg-jd-gray dark:bg-dark-border">
              <a href="#" class="text-primary text-sm hover:underline"
                >查看更多 <i class="fa fa-angle-right"></i
              ></a>
            </div>
          </div>

          <div
            class="bg-white rounded-xl shadow-sm overflow-hidden card-hover dark:bg-dark-card"
          >
            <div class="p-4">
              <h3 class="font-bold text-lg mb-2">运动户外</h3>
              <p
                class="text-sm text-gray-500 mb-3 dark:text-dark-text-secondary"
              >
                活力运动，健康生活
              </p>
              <img
                src="https://picsum.photos/id/175/400/300"
                alt="运动户外"
                class="w-full h-36 object-cover rounded"
              />
            </div>
            <div class="px-4 py-2 bg-jd-gray dark:bg-dark-border">
              <a href="#" class="text-primary text-sm hover:underline"
                >查看更多 <i class="fa fa-angle-right"></i
              ></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 热卖商品 -->
    <div class="container mx-auto px-4 my-8">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-bold">热卖商品</h2>
        <div class="flex space-x-2">
          <button class="w-3 h-3 rounded-full bg-primary"></button>
          <button
            class="w-3 h-3 rounded-full bg-gray-300 hover:bg-primary transition-colors dark:bg-dark-border"
          ></button>
          <button
            class="w-3 h-3 rounded-full bg-gray-300 hover:bg-primary transition-colors dark:bg-dark-border"
          ></button>
        </div>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- 商品1 -->
        <div
          class="bg-white rounded-xl shadow-sm overflow-hidden card-hover dark:bg-dark-card"
        >
          <div class="relative">
            <img
              src="https://picsum.photos/id/111/500/500"
              alt="笔记本电脑"
              class="w-full h-48 object-cover"
            />
            <span
              class="absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded"
              >热销</span
            >
          </div>
          <div class="p-4">
            <h3 class="font-medium mb-2 line-clamp-2">
              轻薄笔记本电脑 14英寸 高性能处理器 8GB内存 512GB SSD
            </h3>
            <div class="flex items-center mb-2">
              <div class="flex text-yellow-400 text-xs">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-half-o"></i>
              </div>
              <span
                class="text-xs text-gray-500 ml-1 dark:text-dark-text-secondary"
                >(2.3万+评价)</span
              >
            </div>
            <div class="flex items-baseline">
              <span class="text-primary font-bold text-xl">¥4299</span>
              <span class="text-gray-400 text-sm line-through ml-2">¥4599</span>
              <span
                class="ml-auto text-xs bg-primary/10 text-primary px-1.5 py-0.5 rounded"
                >直降300</span
              >
            </div>
            <button
              class="mt-3 w-full bg-primary text-white py-2 rounded-lg hover:bg-opacity-90 transition-colors"
            >
              加入购物车
            </button>
          </div>
        </div>

        <!-- 商品2 -->
        <div
          class="bg-white rounded-xl shadow-sm overflow-hidden card-hover dark:bg-dark-card"
        >
          <div class="relative">
            <img
              src="https://picsum.photos/id/117/500/500"
              alt="智能电视"
              class="w-full h-48 object-cover"
            />
            <span
              class="absolute top-2 left-2 bg-jd-orange text-white text-xs px-2 py-1 rounded"
              >新品</span
            >
          </div>
          <div class="p-4">
            <h3 class="font-medium mb-2 line-clamp-2">
              55英寸 4K超高清 智能电视 HDR 全面屏 人工智能语音控制
            </h3>
            <div class="flex items-center mb-2">
              <div class="flex text-yellow-400 text-xs">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-o"></i>
              </div>
              <span
                class="text-xs text-gray-500 ml-1 dark:text-dark-text-secondary"
                >(1.8万+评价)</span
              >
            </div>
            <div class="flex items-baseline">
              <span class="text-primary font-bold text-xl">¥2699</span>
              <span class="text-gray-400 text-sm line-through ml-2">¥2999</span>
              <span
                class="ml-auto text-xs bg-primary/10 text-primary px-1.5 py-0.5 rounded"
                >直降300</span
              >
            </div>
            <button
              class="mt-3 w-full bg-primary text-white py-2 rounded-lg hover:bg-opacity-90 transition-colors"
            >
              加入购物车
            </button>
          </div>
        </div>

        <!-- 商品3 -->
        <div
          class="bg-white rounded-xl shadow-sm overflow-hidden card-hover dark:bg-dark-card"
        >
          <div class="relative">
            <img
              src="https://picsum.photos/id/163/500/500"
              alt="无线蓝牙耳机"
              class="w-full h-48 object-cover"
            />
            <span
              class="absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded"
              >热销</span
            >
          </div>
          <div class="p-4">
            <h3 class="font-medium mb-2 line-clamp-2">
              无线蓝牙耳机 主动降噪 高清通话 长续航 运动防水
            </h3>
            <div class="flex items-center mb-2">
              <div class="flex text-yellow-400 text-xs">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
              </div>
              <span
                class="text-xs text-gray-500 ml-1 dark:text-dark-text-secondary"
                >(5.6万+评价)</span
              >
            </div>
            <div class="flex items-baseline">
              <span class="text-primary font-bold text-xl">¥399</span>
              <span class="text-gray-400 text-sm line-through ml-2">¥599</span>
              <span
                class="ml-auto text-xs bg-primary/10 text-primary px-1.5 py-0.5 rounded"
                >直降200</span
              >
            </div>
            <button
              class="mt-3 w-full bg-primary text-white py-2 rounded-lg hover:bg-opacity-90 transition-colors"
            >
              加入购物车
            </button>
          </div>
        </div>

        <!-- 商品4 -->
        <div
          class="bg-white rounded-xl shadow-sm overflow-hidden card-hover dark:bg-dark-card"
        >
          <div class="relative">
            <img
              src="https://picsum.photos/id/225/500/500"
              alt="智能手表"
              class="w-full h-48 object-cover"
            />
            <span
              class="absolute top-2 left-2 bg-jd-orange text-white text-xs px-2 py-1 rounded"
              >新品</span
            >
          </div>
          <div class="p-4">
            <h3 class="font-medium mb-2 line-clamp-2">
              智能手表 全触摸 心率监测 血氧检测 睡眠监测 运动模式
            </h3>
            <div class="flex items-center mb-2">
              <div class="flex text-yellow-400 text-xs">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-half-o"></i>
              </div>
              <span
                class="text-xs text-gray-500 ml-1 dark:text-dark-text-secondary"
                >(9800+评价)</span
              >
            </div>
            <div class="flex items-baseline">
              <span class="text-primary font-bold text-xl">¥499</span>
              <span class="text-gray-400 text-sm line-through ml-2">¥699</span>
              <span
                class="ml-auto text-xs bg-primary/10 text-primary px-1.5 py-0.5 rounded"
                >直降200</span
              >
            </div>
            <button
              class="mt-3 w-full bg-primary text-white py-2 rounded-lg hover:bg-opacity-90 transition-colors"
            >
              加入购物车
            </button>
          </div>
        </div>
      </div>

      <!-- 查看更多按钮 -->
      <div class="text-center mt-8">
        <button
          class="border border-primary text-primary px-8 py-2 rounded-full hover:bg-primary hover:text-white transition-colors"
        >
          查看更多商品
        </button>
      </div>
    </div>

    <!-- 品牌推荐 -->
    <div class="container mx-auto px-4 my-8">
      <h2 class="text-2xl font-bold mb-6">品牌推荐</h2>
      <div
        class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"
      >
        <div
          class="bg-white rounded-xl shadow-sm p-4 flex items-center justify-center card-hover dark:bg-dark-card"
        >
          <img
            src="https://picsum.photos/id/1/100/50"
            alt="品牌1"
            class="max-h-12 object-contain"
          />
        </div>
        <div
          class="bg-white rounded-xl shadow-sm p-4 flex items-center justify-center card-hover dark:bg-dark-card"
        >
          <img
            src="https://picsum.photos/id/2/100/50"
            alt="品牌2"
            class="max-h-12 object-contain"
          />
        </div>
        <div
          class="bg-white rounded-xl shadow-sm p-4 flex items-center justify-center card-hover dark:bg-dark-card"
        >
          <img
            src="https://picsum.photos/id/3/100/50"
            alt="品牌3"
            class="max-h-12 object-contain"
          />
        </div>
        <div
          class="bg-white rounded-xl shadow-sm p-4 flex items-center justify-center card-hover dark:bg-dark-card"
        >
          <img
            src="https://picsum.photos/id/4/100/50"
            alt="品牌4"
            class="max-h-12 object-contain"
          />
        </div>
        <div
          class="bg-white rounded-xl shadow-sm p-4 flex items-center justify-center card-hover dark:bg-dark-card"
        >
          <img
            src="https://picsum.photos/id/5/100/50"
            alt="品牌5"
            class="max-h-12 object-contain"
          />
        </div>
        <div
          class="bg-white rounded-xl shadow-sm p-4 flex items-center justify-center card-hover dark:bg-dark-card"
        >
          <img
            src="https://picsum.photos/id/6/100/50"
            alt="品牌6"
            class="max-h-12 object-contain"
          />
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-jd-gray py-8 mt-12 dark:bg-dark-card">
      <div class="container mx-auto px-4">
        <!-- 服务保障 -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
          <div class="flex flex-col items-center text-center">
            <div
              class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2"
            >
              <i class="fa fa-truck text-xl"></i>
            </div>
            <h3 class="font-medium">211限时达</h3>
            <p class="text-sm text-gray-500 mt-1 dark:text-dark-text-secondary">
              当日达，次日达
            </p>
          </div>
          <div class="flex flex-col items-center text-center">
            <div
              class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2"
            >
              <i class="fa fa-shield text-xl"></i>
            </div>
            <h3 class="font-medium">正品保障</h3>
            <p class="text-sm text-gray-500 mt-1 dark:text-dark-text-secondary">
              正品保障，放心购物
            </p>
          </div>
          <div class="flex flex-col items-center text-center">
            <div
              class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2"
            >
              <i class="fa fa-refresh text-xl"></i>
            </div>
            <h3 class="font-medium">7天无理由</h3>
            <p class="text-sm text-gray-500 mt-1 dark:text-dark-text-secondary">
              退换货无忧
            </p>
          </div>
          <div class="flex flex-col items-center text-center">
            <div
              class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2"
            >
              <i class="fa fa-headphones text-xl"></i>
            </div>
            <h3 class="font-medium">24小时客服</h3>
            <p class="text-sm text-gray-500 mt-1 dark:text-dark-text-secondary">
              随时为您服务
            </p>
          </div>
        </div>

        <!-- 帮助中心 -->
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6 mb-8">
          <div>
            <h4 class="font-medium mb-3">购物指南</h4>
            <ul class="space-y-2 text-sm">
              <li>
                <a
                  href="#"
                  class="text-gray-500 hover:text-primary transition-colors dark:text-dark-text-secondary"
                  >购物流程</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-500 hover:text-primary transition-colors dark:text-dark-text-secondary"
                  >会员介绍</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-500 hover:text-primary transition-colors dark:text-dark-text-secondary"
                  >常见问题</a
                >
              </li>
            </ul>
          </div>
          <div>
            <h4 class="font-medium mb-3">支付方式</h4>
            <ul class="space-y-2 text-sm">
              <li>
                <a
                  href="#"
                  class="text-gray-500 hover:text-primary transition-colors dark:text-dark-text-secondary"
                  >货到付款</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-500 hover:text-primary transition-colors dark:text-dark-text-secondary"
                  >在线支付</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-500 hover:text-primary transition-colors dark:text-dark-text-secondary"
                  >优惠券使用</a
                >
              </li>
            </ul>
          </div>
          <div>
            <h4 class="font-medium mb-3">配送方式</h4>
            <ul class="space-y-2 text-sm">
              <li>
                <a
                  href="#"
                  class="text-gray-500 hover:text-primary transition-colors dark:text-dark-text-secondary"
                  >上门自提</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-500 hover:text-primary transition-colors dark:text-dark-text-secondary"
                  >配送服务查询</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-500 hover:text-primary transition-colors dark:text-dark-text-secondary"
                  >配送费收取标准</a
                >
              </li>
            </ul>
          </div>
          <div>
            <h4 class="font-medium mb-3">售后服务</h4>
            <ul class="space-y-2 text-sm">
              <li>
                <a
                  href="#"
                  class="text-gray-500 hover:text-primary transition-colors dark:text-dark-text-secondary"
                  >售后政策</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-500 hover:text-primary transition-colors dark:text-dark-text-secondary"
                  >退款说明</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-500 hover:text-primary transition-colors dark:text-dark-text-secondary"
                  >取消订单</a
                >
              </li>
            </ul>
          </div>
          <div>
            <h4 class="font-medium mb-3">商家服务</h4>
            <ul class="space-y-2 text-sm">
              <li>
                <a
                  href="#"
                  class="text-gray-500 hover:text-primary transition-colors dark:text-dark-text-secondary"
                  >商家入驻</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-500 hover:text-primary transition-colors dark:text-dark-text-secondary"
                  >商家中心</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-500 hover:text-primary transition-colors dark:text-dark-text-secondary"
                  >运营服务</a
                >
              </li>
            </ul>
          </div>
          <div>
            <h4 class="font-medium mb-3">关于京东</h4>
            <ul class="space-y-2 text-sm">
              <li>
                <a
                  href="#"
                  class="text-gray-500 hover:text-primary transition-colors dark:text-dark-text-secondary"
                  >公司介绍</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-500 hover:text-primary transition-colors dark:text-dark-text-secondary"
                  >投资者关系</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-500 hover:text-primary transition-colors dark:text-dark-text-secondary"
                  >联系我们</a
                >
              </li>
            </ul>
          </div>
        </div>

        <!-- 版权信息 -->
        <div
          class="pt-6 border-t border-jd-border dark:border-dark-border text-center text-sm text-gray-500 dark:text-dark-text-secondary"
        >
          <p>© 2023 京东JD.COM 版权所有</p>
          <p class="mt-2">京ICP备12345678号-1 京公网安备11000002000001号</p>
        </div>
      </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button
      id="back-to-top"
      class="fixed bottom-20 right-6 bg-primary text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300 hover:bg-opacity-90"
    >
      <i class="fa fa-angle-up text-xl"></i>
    </button>

    <!-- JavaScript -->
    <script>
      // 暗黑模式切换功能
      const themeToggle = document.getElementById("theme-toggle");
      const htmlElement = document.documentElement;

      // 检查用户偏好或保存的设置
      if (
        localStorage.theme === "dark" ||
        (!("theme" in localStorage) &&
          window.matchMedia("(prefers-color-scheme: dark)").matches)
      ) {
        htmlElement.classList.add("dark");
      } else {
        htmlElement.classList.remove("dark");
      }

      // 切换暗黑模式
      themeToggle.addEventListener("click", () => {
        htmlElement.classList.toggle("dark");

        // 保存用户设置
        if (htmlElement.classList.contains("dark")) {
          localStorage.theme = "dark";
        } else {
          localStorage.theme = "light";
        }
      });

      // 回到顶部按钮
      const backToTopButton = document.getElementById("back-to-top");

      window.addEventListener("scroll", () => {
        if (window.scrollY > 300) {
          backToTopButton.classList.remove("opacity-0", "invisible");
          backToTopButton.classList.add("opacity-100", "visible");
        } else {
          backToTopButton.classList.add("opacity-0", "invisible");
          backToTopButton.classList.remove("opacity-100", "visible");
        }
      });

      backToTopButton.addEventListener("click", () => {
        window.scrollTo({
          top: 0,
          behavior: "smooth",
        });
      });

      // 限时抢购倒计时效果
      function updateCountdown() {
        // 这里只是模拟倒计时效果，实际应用中应该使用真实的结束时间
        const hoursEl = document.querySelectorAll(
          ".bg-secondary.text-white"
        )[0];
        const minutesEl = document.querySelectorAll(
          ".bg-secondary.text-white"
        )[1];
        const secondsEl = document.querySelectorAll(
          ".bg-secondary.text-white"
        )[2];

        let hours = parseInt(hoursEl.textContent);
        let minutes = parseInt(minutesEl.textContent);
        let seconds = parseInt(secondsEl.textContent);

        seconds -= 1;

        if (seconds < 0) {
          seconds = 59;
          minutes -= 1;

          if (minutes < 0) {
            minutes = 59;
            hours -= 1;

            if (hours < 0) {
              hours = 23;
            }
          }
        }

        hoursEl.textContent = hours.toString().padStart(2, "0");
        minutesEl.textContent = minutes.toString().padStart(2, "0");
        secondsEl.textContent = seconds.toString().padStart(2, "0");
      }

      // 每秒更新一次倒计时
      setInterval(updateCountdown, 1000);

      // 商品卡片悬停效果已通过CSS实现
    </script>
  </body>
</html>
